<template>
  <div class="height"></div>
  <div class="title">
    <img src="@/assets/logo.png" alt="">
    <h2 class="linercolor">宽情微服务注册中心</h2>
  </div>
  <div class="home">
    <van-tabs v-model:active="formData.active" @click-tab="tabChange">
      <van-tab title="热卖藏品">
        <!-- animated -->
        <van-swipe :autoplay="3000" lazy-render class="banner-swiper">
          <van-swipe-item v-for="(item, index ) in bannerListimg" :key="index">
            <div class="swiper" :style="'background-image:url(' + item.image + ') '" @click="goPage(item.url)">
              <!-- <h2>宽情微服务注册中心首发</h2>
              <p>合成通道</p>
              <span class="linearbg">前往合成</span> -->
              <img :src="item.image" alt="">
            </div>
          </van-swipe-item>
        </van-swipe>
        <van-notice-bar :scrollable="false" class="notice-bar">
          <template #left-icon>
            <img src="../../assets/image/icon/notice.png" alt="" class="notice-icon">
          </template>
          <template #right-icon>
            <img src="../../assets/image/icon/listbar.png" alt="" class="notice-icon"
              @click="$router.push('/NoticeList')">
          </template>
          <van-swipe vertical class="notice-swipe" :autoplay="100000" :show-indicators="false">
            <van-swipe-item v-for="(item, index) in noticeList" :key="index" @click="godetails(item.noticeId)">
              {{ item.title }}</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
        <Collection />
      </van-tab>
      <van-tab title="盲盒系列">
        <van-swipe :autoplay="3000" lazy-render class="banner-swiper">
          <van-swipe-item v-for="(item, index ) in bannerListimg" :key="index">
            <div class="swiper" :style="'background-image:url(' + item.image + ') '" @click="goPage(item.url)">
              <img :src="item.image" alt="">
            </div>
          </van-swipe-item>
        </van-swipe>
        <van-notice-bar :scrollable="false" class="notice-bar">
          <template #left-icon>
            <img src="../../assets/image/icon/notice.png" alt="" class="notice-icon"
              @click="$router.push('/NoticeList')">
          </template>
          <template #right-icon>
            <img src="../../assets/image/icon/listbar.png" alt="" class="notice-icon"
              @click="$router.push('/NoticeList')">
          </template>
          <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
            <van-swipe-item v-for="(item, index) in noticeList" :key="index" @click="godetails(item.noticeId)">
              {{ item.title }}</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
        <tabPan />
      </van-tab>
      <van-tab title="发售日历">
        <van-swipe :autoplay="3000" lazy-render class="banner-swiper">
          <van-swipe-item v-for="(item, index ) in bannerListimg" :key="index">
            <div class="swiper" :style="'background-image:url(' + item.image + ') '" @click="goPage(item.url)">
              <!-- <h2>宽情微服务注册中心首发</h2>
              <p>合成通道</p>
              <span class="linearbg">前往合成</span> -->
              <img :src="item.image" alt="">
            </div>
          </van-swipe-item>
        </van-swipe>
        <van-notice-bar :scrollable="false" class="notice-bar">
          <template #left-icon>
            <img src="../../assets/image/icon/notice.png" alt="" class="notice-icon"
              @click="$router.push('/NoticeList')">
          </template>
          <template #right-icon>
            <img src="../../assets/image/icon/listbar.png" alt="" class="notice-icon"
              @click="$router.push('/NoticeList')">
          </template>
          <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
            <van-swipe-item v-for="(item, index) in noticeList" :key="index" @click="godetails(item.noticeId)">
              {{ item.title }}</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
        <Calendar />
      </van-tab>
    </van-tabs>
    <div class="gift-warp" v-if="showgift">
      <img src="../../assets/image/gift-box.png" alt="" @click="goGift">
    </div>
    <div class="Record">
      <span  @click="Hyperlinks('https://beian.miit.gov.cn/#/home')">粤ICP备2021117837号-3 </span>
      <span>增值电信业务经营许可证：粤B2-20220326</span>
      <span>艺术品经营单位备案：440304180035</span>
      <span @click="Hyperlinks('http://kuancomm.com/')">Copyright © kuanqing.art 2022 - 2026 公司介绍与联系方式 </span>
    </div>
  </div>
</template>
<script>
import { ref, defineComponent, reactive, onMounted, toRefs, nextTick } from "vue";
import Collection from "./homeNode/Collection.vue";
import Calendar from "./homeNode/calendar.vue";
import tabPan from "./homeNode/tabPan.vue";
import { bannerList, appNoticeList, ToBeReceived } from "@/api/public";
import { useStore } from "vuex";
import { useRouter } from "vue-router"
import store from "../../store/modules/app";
export default {
  components: {
    Collection,
    Calendar,
    tabPan
  },
  setup() {
    const store = useStore();
    const router = useRouter()
    const noticeList = ref([])
    const bannerListimg = ref([])
    const goPage = (val) => {
      router.push(val)
    }
    const goGift = () => {
      router.push({
        path: '/Mygift',
        query: {
        }
      })
    }
    const showgift = ref(false)
    onMounted(() => {
      localStorage.setItem("type", "0")
      bannerList().then(res => {
        bannerListimg.value = res.data.data
        console.log(bannerListimg.value)
      })
      appNoticeList().then(r => {
        noticeList.value = r.data.data
        nextTick(() => {
        })
      })
      if (localStorage.getItem('token')) {
        const data = { pageNum: 1, pageSize: 1 }
        ToBeReceived(data).then(e => {
          console.log(e.data.data.total)
          if (e.data.data.total >= 1) {
            showgift.value = true
          }
        })
      }
    })
    const tabChange = (e) => {
      localStorage.setItem("type", e.name)
    }
    const Hyperlinks = (url) => {
      window.open(url)
    }
    const menulist = ref([
      { id: 1, name: "全部价格" },
      { id: 2, name: "全部状态" },
      { id: 3, name: "全部系列" },
    ])
    const menulist1 = ref([
      { id: 2, name: "全部状态" },
      { id: 3, name: "全部状态" },
    ])
    const menulist2 = ref([
      { id: 1, name: "全部时间" }
    ])
    const formData = reactive({
      active: 0,
    })
    const godetails = (id, isSystem) => {
      router.push({
        path: '/NoticeInfo',
        query: {
          id: id,
          isSystem: isSystem
        }
      })
    }

    return {
      formData, bannerListimg, tabChange, menulist, menulist2, menulist1, noticeList, godetails, goPage, goGift, showgift, Hyperlinks
    }
  }
}
</script>
<style lang="less" scoped>
@keyframes mymove {
  50% {
    // width: 150px;

    // height: 150px;

    transform: rotate(360deg);
  }
}

@-webkit-keyframes mymove {
  /* Safari and Chrome */

  50% {
    // width: 100px;

    // height: 100px;

    transform: rotate(360deg);
  }
}

.gift-warp {
  animation: mymove 10s infinite;
  -webkit-animation: mymove 10s infinite;
  /* Safari and Chrome */
  position: fixed;
  right: 0;
  //top: 0px;
  bottom: 200px;

  img {
    width: 100px;
  }
}

.title {
  padding: 10px 30px;
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  line-height: 80px;

  h2 {
    font-size: 36px;
    font-weight: 400;
    line-height: 76px;
  }

  img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
  }
}

.home {
  width: 750px;

  &:deep(.van-tabs__nav) {
    background: transparent;
  }

  &:deep(.van-tabs__wrap) {
    padding: 0px 50px;
  }

  &:deep(.van-tab) {
    color: #fff;
    font-size: 31px;
    font-weight: 400;
    opacity: 0.8;
    line-height: 60px;
  }

  &:deep(.van-tabs__line) {
    background-color: transparent;
    background-image: url('../../assets/image/tab-active.png');
    background-size: contain;
    bottom: 40px;
  }

  &:deep(.van-tab--active) {
    background: linear-gradient(to right, #34d1f9, #37dc6d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 36px;
    font-weight: bold;
  }

  .banner-swiper {
    padding: 0px 21px;
    margin-top: 20px;

    .swiper {
      border-radius: 10px;
      overflow: hidden;
      height: 390px;
      width: 710px;
      background-size: 100% 100%;

      img {
        width: 100%;
        height: 100%;
      }

      h2 {
        color: white;
        font-size: 48px;
        font-weight: bold;
        line-height: 48px;
        margin-left: 59px;
        margin-top: 79px;
        font-family: Source Han Sans CN;
      }

      p {
        color: #fff;
        font-size: 30px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        line-height: 48px;
        margin-left: 59px;
        margin-top: 63px;
      }

      span {
        display: inline-block;
        margin-left: 59px;
        margin-top: 69px;
        width: 148px;
        height: 40px;
        background: linear-gradient(-90deg, #37dc6d, #34d1f9);
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        color: #fff;
      }
    }
  }

  &:deep(.van-notice-bar) {
    color: #282a2c !important;
  }

  .notice-bar {
    margin: 0px 21px;
    margin-top: 31px;
    height: 98px;
    background: #282a2c;
    border: 1px solid #ffffff;
    border-radius: 20px;

    .notice-icon {
      width: 42px;
      height: 42px;
    }

    &:deep(.van-swipe-item) {
      padding-left: 30px;
      height: 28px;
      font-size: 30px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fff;
      height: 60px;
      line-height: 60px;
      //   padding-top: 5px;
    }

    &:deep(.van-notice-bar__content) {
      height: 60px;
      color: #282a2c;
    }

    &:deep(.van-swipe__track--vertical) {
      height: 80px;
    }
  }
}

.Record {
  line-height: 48px;
  width: 100%;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;

  a {
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    margin: 0 auto;
  }

  span {
    display: block;
    text-align: center;
    width: 100%;
    margin: 0 auto;
  }
}
</style>